<template>
    <view>
        <public-module></public-module>
        <wlk-navbar  title="附近商家" navbarType='3' ></wlk-navbar>
        <block v-if="loadStatus=='nomore' && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.search"
                        text="没有搜索结果"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view class="wlkflex pd20 br04 list bgw shadow justify-between" v-for="(item,index) in list" @click="$Router.push('/pages/merch/detail?id='+item.id)">
                <view class="left">
                    <image lazy-load :src="item.images[0]" class="block br04"  mode="aspectFill"/>
                </view>
                <view class="right wlkflex justify-between align-start">
                    <view class="info">
                        <view class="u-line-1 name bold">{{item.name}}</view>
                        <view class="work mt10">
                            营业时间： <text>{{item.workrange}}</text>
                        </view>
                        <view class="mt10 wlkflex align-end justify-between">
                            <image mode="widthFix"  src="/static/images/index/map.png" style="width: 22rpx;"></image>
                            <text class="address u-line-1">{{item.address}}</text>
                        </view>
                        <view class="wlkflex mt10 overHidden">
                            <view class="tag br04 mr10" v-if="k<3" :style="{color:themeColor}" v-for="(tag,k) in item.tags">{{tag}}</view>
                        </view>
                    </view>
                    <view class="distance mt10">
                        <view class="center">{{item.distance}} <text class="ml05">km</text></view>
                        <view class="wlkflex btn mt05" @tap.stop="toMap(item.lat,item.lng,item.name,item.name)">
                            <uni-icons type="paperplane-filled" :color="themeColor" size="20"></uni-icons>
                            <view :style="{color:themeColor}">去这里</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="load-more">
                <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
            </view>
        </block>
	</view>
</template>

<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import { openMap,makePhoneCall,toUrl,toWork } from '@/wlkutils/tools';
    export default {
		data() {
			return {
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
			};
		},
        computed:{
            ...mapState(['lat','lng','location','themeColor','uEmpty'])
        },
        onLoad(e) {
         _self=this;
        },
        onShow(){
            this.loadStatus = 'loading';
            this.page = 1;
            this.list = [];
            this.getData();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            toMap(lat,lng,name, address){
                openMap(lat,lng,name, address);
            },
            getData(){
                uni.$u.http.post('merch/getList', {
                    lat:_self.lat,
                    lng:_self.lng,
                    page: this.page,
                }).then(res => {
                    if (res && res.data && res.data.rows) {
                        this.list = this.list.concat(res.data.rows);
                    }
                    this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
                }).catch(res => {
                })
            },

        }

	}
</script>

<style lang="scss">
    page{
        .list{
            width: 92%;
            margin: 20rpx auto 0 auto;
            font-size: $font-base;
            .left{
                image{
                    width: 175rpx;
                    height: 175rpx;
                }
            }
            .right{
                width: 71%;
                .info{
                    width: 72%;
                    .name{
                        font-size: $font-lg;
                    }
                    .work{
                        color: $uni-text-color-grey;
                        font-size: $font-sm;
                    }
                    .address{
                        color: $uni-text-color-grey;
                        font-size: $font-sm;
                        width: 93%;
                    }
                    .tag{
                        background-color: $-wash-wait-color;
                        padding: 5rpx 10rpx;
                        font-size: $font-sm;
                    }
                }
                .distance{
                    width: 28%;
                    color: $uni-text-color-grey;
                    font-size: $font-sm;
                    .btn{
                        background-color: $-wash-wait-color;
                        padding: 10rpx 10rpx;
                        border-radius: 40rpx;
                    }
                }
            }
        }
    }



</style>
